// webpack 是一个 Node 包，使用 CommonJS 模块化规范来开发
const path = require('path');
// 用来解析 SFC 文件中，各个语言模块中的代码，使其对应到 webpack 的 loader 中
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// 根据 HTML 模板文件，自动将 webpack 打包输出后的文件引入到该模板文件中
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.join(__dirname, 'public'),
        publicPath: '/',
    },
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        port: 9100,
        progress: true,
        historyApiFallback: true,
    },
    resolve: {
        // 当我们引入文件忽略了后缀名是，默认按照如下顺序的后缀来解析
        extensions: ['.vue', '.js'],
    },
    // webpack 默认只能解析 js、json 文件，对于其他类型的文件，我们需要配置相应的 loader 来处理
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.vue$/,
                use: 'vue-loader',
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(woff|ttf)$/,
                use: 'file-loader',
            },
        ],
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'public/index.html'),
            filename: 'index.html',
        }),
        new MiniCssExtractPlugin(),
    ],
};
